import React, {Component} from "react";

export default class Item extends Component{
    state = {mouse:false}
    delHandle = (id) =>{
        if (window.confirm("再次确定")===true){
            this.props.delTodo(id)
        }
        else return
    }
    handleMouse = (a) =>{
        return () =>{
            this.setState({mouse:a})
        }
    }
    handleCheck = (id) => {
        return(event) => {
            this.props.updateTodo(id,event.target.checked)
        }
    }
    render() {
        const {id,value,action} = this.props
        const {mouse} = this.state
        return(
            <div>
                <li className="input-group border" onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
                    <div>
                        <input type="checkbox" className="m-3" id="CheckboxGroup1" checked={action}  onChange={this.handleCheck(id)}/>
                        <span>{value}</span>
                        <button className="button btn btn-outline-danger float-right"  style= {{display:mouse ? 'block':'none'}} onClick={()=>this.delHandle(id)}>删除</button>
                    </div>
                </li>
            </div>
        )
    }
}